<template>
  <template v-if="voteInfo.appBizVoteSetting.voteType === 'normal'">
    <!-- 直接投票 -->
    <div
      v-if="voteInfo.appBizVoteSetting.votePattern === 'bydirectly'"
      class="vote_button margin-08"
      @click="handleVote('submit')"
    >
      {{ voteInfo.appBizVoteLayout.favourButton || "投票" }}
    </div>
    <!-- 选择投票 -->
    <div
      v-if="voteInfo.appBizVoteSetting.votePattern === 'bycheck'"
      class="vote_button margin-08"
      @click="handleVote()"
    >
      <span
        :class="{ active: store.checkList.includes(prop.voteItem.candidateId) }"
        class="check"
      ></span>
      <span>{{ voteInfo.appBizVoteLayout.favourButton || "投票" }}</span>
    </div>
  </template>
  <template v-if="voteInfo.appBizVoteSetting.voteType === 'decision'">
    <!-- 决议投票 -->
    <div class="vote_button margin-08 result">
      <div class="" @click="handleApprove()">
        <span
          :class="{
            active: store.checkList.includes(prop.voteItem.candidateId),
          }"
          class="check"
        ></span>
        <span>{{ voteInfo.appBizVoteLayout.favourButton || "赞成" }}</span>
      </div>
      <div @click="handleObjectTo()">
        <span
          :class="{
            active: store.objectTo.includes(prop.voteItem.candidateId),
          }"
          class="check"
        ></span>
        <span>{{ voteInfo.appBizVoteLayout.protestButton || "不赞成" }}</span>
      </div>
    </div>
  </template>
</template>
<script setup>
import { ref } from "vue";
import { store } from "./store.js";

const voteInfo = ref(store.voteInfo);
const prop = defineProps(["voteItem"]);
const emit = defineEmits(["submit"]);
// 选中
const handleVote = (active) => {
  let idx = store.checkList.indexOf(prop.voteItem.candidateId);
  if (idx === -1) {
    store.checkList.push(prop.voteItem.candidateId);
  } else {
    store.checkList.splice(idx, 1);
  }
  if (active) emit("submit");
};
// 赞成
const handleApprove = () => {
  let idx = store.checkList.indexOf(prop.voteItem.candidateId);
  let rejIdx = store.objectTo.indexOf(prop.voteItem.candidateId);
  if (idx === -1) {
    store.checkList.push(prop.voteItem.candidateId);
    if (rejIdx !== -1) {
      store.objectTo.splice(rejIdx, 1);
    }
  } else {
    store.checkList.splice(idx, 1);
  }
};
// 反对
const handleObjectTo = () => {
  let idx = store.checkList.indexOf(prop.voteItem.candidateId);
  let rejIdx = store.objectTo.indexOf(prop.voteItem.candidateId);
  if (rejIdx === -1) {
    store.objectTo.push(prop.voteItem.candidateId);
    if (idx !== -1) {
      store.checkList.splice(idx, 1);
    }
  } else {
    store.objectTo.splice(rejIdx, 1);
  }
};
</script>
<style scoped>
.margin-08 {
  margin: 0.8rem;
}

.vote_button {
  height: 3.2rem;
  line-height: 3.2rem;
  text-align: center;
  color: var(--van-blue);
  background: #e5f1ff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 0.6rem;
}

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #c1deff;
  margin-right: 0.8rem;
}

.active {
  background: var(--van-blue);
}

.active::before {
  content: "\e728";
  display: inline-block;
  color: var(--van-white);
  font: 14px/1 vant-icon;
  font-size: 1.2rem;
}

.voted {
  color: var(--van-white);
  background: var(--van-blue);
}

.result {
  border: 1px solid var(--van-blue);
}

.result > div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result > div:first-child {
  background: var(--van-white);
  border-right: 1px solid var(--van-blue);
}
</style>